<template>
  <div class="search-input flex-inline-between-center">
    <i class="iconfont font26 icon-sousuo-icon"></i>
    <input v-model="value"/>
    <i :class="['iconfont font26 icon-shouye-guanbi font-ddd', value !== '' ? '' : 'clearBar']" @click="clear"></i>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SearchInput from '../input/search.vue';
@Component({
  components: {
    SearchInput,
  },
})
export default class TopSearch extends Vue {
  private value: string = '';
  /**
   * 清空输入框
   */
  private clear() {
    this.value = '';
  }
}
</script>
<style lang="scss" scoped>
.search-input {
  width: 100%;
  height: 100%;
  line-height: 100%;
  padding: 0 24px;
  border-radius: 30px;
  background-color: #f5f5f5;
  input {
    width: calc(100% - 62px);
    height: 100%;
    margin: 0 auto;
    padding: 0 22px;
    background-color: #f5f5f5;
    border: none;
  }
  .clearBar {
    color: transparent;
  }
}
</style>
